<template>
  <!--  <div class="ad-table-form">-->
  <!--    <div class="ad-block">-->
  <!--      <div class="table-op">-->
  <!--        <el-button size="mini" type="primary" plain @click="addDriver">新增</el-button>-->
  <!--      </div>-->
  <div id="outlayManage">
    <ad-table :data="driver.list" v-loading="driver.initLoading" ux-grid ref="driverTable" keep-source :rules="rules"
              class="table"
              @row-click="selectDriverRow" :filterQuery="driverFilterQuery" @search="getInitDriverList"
              :edit-config="{trigger: 'manual', autoClear: false, mode: 'row'}">
      <ad-table-column label="序号" type="index" ctype="index"/>
      <ad-table-column label="费用类型" prop="type" dictName="fee_type" edit-render width="120">
        <template v-slot:edit="{row}">
          <!--            <el-input size="mini" v-model="row.type" edit-render />-->
          <ad-status-select size="mini" v-model="row.type" :dict="dict.fee_type"/>
        </template>
      </ad-table-column>
      <ad-table-column label="金额" prop="fee" edit-render width="120">
        <template v-slot:edit="{row}">
          <el-input size="mini" v-model="row.fee"/>
        </template>
      </ad-table-column>
      <ad-table-column label="结算人" prop="settlementName" edit-render width="170">
        <template v-slot:edit="{row}">
          <!--        <el-input size="mini" v-model="row.settlementName"/>-->
          <ad-suggestion size="mini" v-model="row.settlementName" defaultProp="linkmanName" type="table"
                         @select="(link)=>{row.settlementName=link.linkmanName;row.settlementPhone=link.linkmanPhone;row.settlementId=link.linkmanId}"
                         @clear="()=>{row.settlementName=null;row.settlementPhone=null;row.settlementId=null}"
                         :api="{method: getSuggestCompanyList, query: 'linkmanName'}"
                         :options="[{label: '结算人', prop: 'linkmanName'},{label: '结算人电话', prop: 'linkmanPhone'}]"/>

        </template>
      </ad-table-column>
      <ad-table-column label="结算人电话" prop="settlementPhone" edit-render width="170">
        <template v-slot:edit="{row}">
          <ad-suggestion size="mini" v-model="row.settlementPhone" defaultProp="linkmanPhone" type="table"
                         @select="(link)=>{row.settlementName=link.linkmanName;row.settlementPhone=link.linkmanPhone;row.settlementId=link.linkmanId}"
                         @clear="()=>{row.settlementName=null;row.settlementPhone=null;row.settlementId=null}"
                         :api="{method: getSuggestCompanyList, query: 'linkmanPhone', startQueryCount: 4}"
                         :options="[{label: '结算人', prop: 'linkmanName'},{label: '结算人电话', prop: 'linkmanPhone'}]"/>

          <!--        <el-input size="mini" v-model="row.settlementPhone"/>-->
        </template>
      </ad-table-column>
      <ad-table-column label="操作" width="150">
        <template v-slot="{row}">
          <template v-if="driverTable.isActiveByRow(row)">
            <el-button size="mini" type="primary" plain @click="editDriver(row)">保存</el-button>
            <el-button size="mini" type="primary" plain @click="cancel(row)">取消</el-button>
          </template>
          <template v-else>
            <el-button size="mini" type="primary" plain @click="edit(row)">修改</el-button>
            <el-button size="mini" type="primary" plain @click="delDriver(row)">删除</el-button>
          </template>
        </template>
      </ad-table-column>
    </ad-table>
  </div>
  <!--      <ux-grid :data="driver.list" ref="tableTest" :edit-config="{trigger: 'click', mode: 'row'}">-->
  <!--        <ux-table-column title="司机姓名" field="name" edit-render>-->
  <!--          <template v-slot:edit="{row}">-->
  <!--            <el-input v-model="row.name"/>-->
  <!--          </template>-->
  <!--        </ux-table-column>-->
  <!--      </ux-grid>-->
  <!--    </div>-->
  <!--  </div>-->
</template>

<script>
  import AdTable from '@/components/AdTable'
  import AdTableColumn from '@/components/AdTable/AdTableColumn'
  import AdStatusSelect from '@/components/AdStatusSelect'
  import AdSuggestion from '@/components/AdSuggestion'
  // import { getList as getDriverList, add as addDriver, edit as editDriver, del as delDriver }from '@/api/pick/wait'
  import api from '@/api/pick/wait'
  import {getCompanyList as getSuggestCompanyList} from '@/api/suggestion'

  export default {
    components: {AdTable, AdTableColumn, AdStatusSelect, AdSuggestion},
    dicts: ['fee_type'],
    data() {
      return {
        driverTable: null,
        driverFilterQuery: {},
        isSave: false,
        driver: {
          initLoading: true,
          list: [],
          summary: {}
        },
        rules: {
          type: [{required: true, message: '请选择类型'}],
          settlementName: [{required: true, message: '请输入结算人'}],
          fee: [{required: true, message: '请输入金额'}],
          settlementPhone: [{required: true, message: '请输入结算人电话'}],
        }
      }
    },
    watch: {
      '$attrs.visible': {
        immediate: true,
        handler(visible) {
          if (visible) {
            this.getInitDriverList();
            this.isSave = false;
          }
        }
      }
    },
    created() {
      this.getInitDriverList()
    },
    mounted() {
      this.driverTable = this.$refs.driverTable.$children[0]
      // this.driverTable = this.$refs.tableTest
    },
    methods: {
      getSuggestCompanyList,
      async addDriver() {
        if (this.isSave) {
          this.$notify({
            title: '新增',
            message: '请先保存',
            position: 'bottom-right',
            type: 'error'
          });
          return
        }
        const {row} = await this.driverTable.insertRow({type: '', name: ''}, -1)
        await this.driverTable.setActiveRow(row)
        this.isSave = true;
      },
      selectLink(link) {
        this.setLink(link)
        this.setPick()
      },
      removeLink() {
        this.form.companyId = ''
        this.form.companyName = ''
        this.form.linkmanId = ''
        this.form.linkmanName = ''
        this.form.linkmanPhone = undefined
        this.form.pickLinkmanName = ''
        this.form.pickLinkmanPhone = undefined
      },
      setLink(link) {
        this.form.companyId = link.companyId
        this.form.companyName = link.companyName
        this.form.linkmanId = link.linkmanId
        this.form.linkmanName = link.linkmanName
        this.form.linkmanPhone = link.linkmanPhone
      },
      edit(row) {
        this.driverTable.setActiveRow(row)
        this.isSave = true;
      },
      cancel(row) {
        if (row.id) {
          this.driverTable.clearActived().then(() => {
            this.driverTable.revertData(row)
          })
        } else {
          this.driverTable.remove(row)
        }
        this.isSave = false;
      },
      editDriver(row) {
        this.driverTable.validate(row).then(data => {
          if (data) return
          this.isSave = false;
          console.log(row)
          if (row.id) {  // 修改
            if (this.driverTable.isUpdateByRow(row)) {
              api.updataExtraFee(row).then(res => {
                this.driverTable.clearActived()
              })
            }
          } else {  // 新增
            let ajaxData = {...row};
            ajaxData.orderId = this.$attrs.id
            ajaxData.addScene = 1;
            api.addExtraFee(ajaxData).then(res => {
              this.driverTable.clearActived()
              this.getInitDriverList()
            })
          }
        })
      },
      delDriver(row) {
        this.$confirm('确定删除吗？', '删除').then(() => {
          delDriver({id: row.id}).then(res => {
            this.driverTable.remove(row)
          })
        }).catch(err => {
        })
      },
      selectDriverRow() {

      },
      getInitDriverList() {
        api.getExtraFee(this.$attrs.id).then(res => {
          this.driver.list = res.data
          this.driver.initLoading = false
        })
      }

    }
  }
</script>

<style lang="scss" scoped>

  .table {
    height: 300px;
  }

  .table-op {
    margin: 0 0 12px 0;
    text-align: right;
  }

  ::v-deep .ad-table.ad-table__ux-grid {
    .elx-table-th {
      height: 38px !important;
      font-size: 12px;
    }

    .elx-table-td {
      padding-top: 5px;
      padding-bottom: 5px;
      font-size: 12px;
    }
  }
</style>